Better Callouts Documentation
Better Callouts is an Obsidian plugin that lets
you create, edit, and manage custom callout styles visually
— no CSS knowledge needed. It handles everything for you,
including automatic snippet generation.
.obsidian/snippets/betterCallouts.css up to
date
.obsidian/plugins/ (if it doesnt exist
yet create the folder)
https://github.com/hannesschacherl/better-callouts.git
CSS-File)
BetterCallouts (This applies all
styles created by the plugin to your notes)
If you use Obsidian Publish:
.obsidian/snippets/betterCallouts.css to
your publish.css file for them to work on
the published Obsidian
.obsidian/snippets/ folder and runs a
shell script to merge the files into your
publish.css when detecting changes
c-new appears
Accepted colors:
red,
blue, darkgreen)
#ffcc00,
#123456)
rgb(255, 0, 0),
rgba(0, 128, 255, 0.2))
hsl(200, 100%, 50%),
hsla(0, 100%, 50%, 0.5))
var(--text-accent),
var(--color-base-40))
if you use something like
var(--some-var) and forget the closing
) other callouts may stop working.
Input validation is planned for the future but
currently not active.
The Plugin uses the following files:
Vault
├── .obsidian
│ ├── plugins
│ │ ├── better-callouts
│ │ │ ├── data.json
│ │ │ ├── main.js
│ │ │ └── manifest.json
│ ├── snippets
│ │ ├── betterCallouts.css
plugins > better-callouts > main.js:
here is the logic for everything this plugin does
plugins > better-callouts > data.json:
here are all your custom callouts stored
plugins > better-callouts >
manifest.json:
tells obsidian information about this plugin
snippets > betterCallouts.css: this is
the automatically generated CSS-File
Now you've set up the plugin to work for all your custom callouts.
You can insert them into your file using code like this:
> [!c-my-callout] Title
> Content
The Title ([!c-my-callout]) for the callout
you want to add is displayed in the settings screen of
this plugin.
If you want an even easier way for inserting the callouts you can:
CTRL / CMD + P (to
open the command palette)
Better Callouts: Insert better callout
(only works when in edit mode)